<template>
    <div class="box-trade" v-if="props.data">
        <el-card v-for="(item,index) in props.data" :key="index" class="box-card" @click="handleXChakan1(item)">
            <div class="img-box">
                <el-image fit="fill" style="width: 100%; height: 100%;" :src="checkPicture(item.mainFileList)"></el-image>
                <div class="purchaseNumber"><span >求购编号:</span><span style="margin: 0;">{{ item.releaseNo }}</span></div>
            </div>
            <el-row>
                <el-col :span="24" class="text-ellipsis marginTop10" style="font-weight: 400;">
                   <el-tooltip effect="dark" :content="item.companyName" placement="top">{{item.companyName}}</el-tooltip> 
                </el-col>
                <el-col :span="24" class="marginTop10">
                    <el-tooltip effect="dark" placement="top" :content="item.carryCityName +'/'+ item.carryCountryName">
                    <span> 
                        <span style="font-size: 16px;font-weight: 600;color: black;">{{item.carryCityName}}/</span>
                        <span style="color: #999;"> {{item.carryCountryName}} </span> 
                    </span>
                    </el-tooltip> 
                </el-col>
                
                <el-col :span="6" class="marginTop10 text-center" style="border: 1px solid #eeeeee;border-radius: 4px;color: #212121;">{{{ 5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP' }[item.boxType]}}</el-col>
                <el-col :offset="1" :span="5" class="marginTop10 text-center" style="border: 1px solid #eeeeee;border-radius: 4px; color: #212121;">{{ { 5: '全新', 10: '次新', 15: '适货', 20: '混提' }[item.boxCondition]}}</el-col>
                <el-col :span="24"></el-col>
                
                <el-col :span="6" class="marginTop10" style="color:rgb(255, 0, 0);font-weight: 700;font-size: 18px;">{{{'USD':'$','CNY':'￥'}[item.currency]}} {{ item.unitPrice }}</el-col>
                <!-- <el-col :offset="8" :span="10" class="text-right marginTop10" style="color:#2158F3">求购箱量{{item.inventory}}个</el-col> -->

                <el-col :span="24" class="marginTop20">
                    <el-row justify="center">
                        <el-button icon="ChatDotSquare" type="primary" @click.stop="handleZixun1(item)" plain style="width: 40%;">咨询</el-button>

                        <!-- <el-button v-if="item.companyId != param.userCompanyId" type="primary" plain style="width: 40%;">下单</el-button> -->
                    </el-row>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog v-model="param.centerDialogVisible" title="提示" width="500" destroy-on-close center>
        <span>您还未完成企业实名认证，请您完成企业实名认证后，就可以进行相应业务功能操作啦！</span>
        <template #footer>
            <div class="dialog-footer">
            <el-button @click="param.centerDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="goAuthenticate">企业实名认证</el-button>
            </div>
        </template>
        </el-dialog>
    </div>
   
    <div class="clearFix"></div>
    <el-empty v-if="props.data.length == 0" description="当前暂无广告数据" />
    <el-pagination v-if="props.data.length > 0  && config.isPagination" v-model:current-page="param.page.pageNum" 
    v-model:page-size="param.page.pageSize" :pager-count="5" :page-sizes="[10, 20, 50, 100]" :total="config.total"
    background layout="total,sizes,prev, pager, next,jumper" @size-change="onHandleSizeChange"
    @current-change="onHandleCurrentChange" size="default" style="float: right;" />
</template>
<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
const router = useRouter();
const userStore = useUserStore()
const emit = defineEmits(['pageChange','handleXiaDan','handleChakan'])
onMounted(() => {
    const user = userStore.getUser() //user信息
    param.userCompanyId = user.companyId // 当前登录账号 所属公司id
});

const props = defineProps({
    data: {
        type: Object,
        default: () => {}
    },
     // 配置项
    config: {
        type: Object,
        default: () => { },
    },
})
const param = reactive({
    userCompanyId: '',
    page: {
        pageNum: 1,
        pageSize: 10
    },
    centerDialogVisible: false
})
// const handleZixun1 = () => {
//    if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
//       param.centerDialogVisible = true
//    }else{
//       console.log('点击了咨询')
//       // emit('handleXiaDan')
//     }
// }

const checkPicture = (val: string) => {
    let picObj = JSON.parse(val)
    if (picObj.length > 0) {
        return picObj[0].url
    }else {
        return ''
    }
}


const handleXiaDan1 = (row) => {
   if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
      param.centerDialogVisible = true
   }else{
      console.log('点击了下单')
      emit('handleXiaDan',row)
    }
}
const handleZixun1 = (row) => {
   if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
      param.centerDialogVisible = true
   }else{
      console.log('点击了咨询')
    }
}
const handleXChakan1 = (row) => {
  emit('handleChakan',row)
}

  
// const handleDetails = (row: any) => {
//     if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
//         param.centerDialogVisible = true
//     }else{
//         emit('clickJump', row)
//     } 
// }

// 分页数量
const onHandleSizeChange = (val: number) => {
  param.page.pageSize = val;
  // tableInstanceRef.value!.clearSelection();
  emit('pageChange', param.page);
};
// 分页页码
const onHandleCurrentChange = (val: number) => {
  param.page.pageNum = val;
  // tableInstanceRef.value!.clearSelection();
  emit('pageChange', param.page);
};
// 实名认证
const goAuthenticate = () => {
  router.push('/enterpriseManage/realAuthentication')
  param.centerDialogVisible = false
}
</script>

<style lang="scss" scoped>
.box-card{
    width: 19%;
    float: left;
    margin:0 1% 10px 0
}
.img-box{
    width: 100%;
    height: 275px;
    position: relative;

}
.purchaseNumber{
  position: absolute;
  bottom: 0;
  left: 0;
  background: #2158F3;
  font-size: 12px;
  width: 100%;
  color: #fff;
}
</style>
